<template>
  <div class="bg-#F8FAFD text-center pt-75 pb-125">
    <h1 text-35 mb-14>四步快速签约</h1>
    <div class="text-#5F6368 text-14 mb-62">简单高效的接入流程，快速开启支付服务</div>
    <div class="flex justify-center gap-48 relative">
      <div v-for="(i, idx) in steps" :key="idx" class="w-135">
        <div class="number flex items-center justify-center m-auto">{{ idx + 1 }}</div>
        <div class="mt-22 mb-14 font-700 text-18 text-#548ADB">{{ i.title }}</div>
        <div class="line-height-22 text-13 text-#5F6368">{{ i.desc }}</div>
      </div>
      <div class="absolute top-54 line h-3 "></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, shallowReactive } from 'vue'
const steps = shallowReactive([
  {
    title: '注册账号',
    desc: '填写基本信息，完成企业实名认证，创建专属商户账号'
  },
  {
    title: '选择套餐',
    desc: '根据业务需求选择合适的套餐，定制支付解决方案'
  },
  {
    title: '签订协议',
    desc: '在线签署服务协议，完成电子签约，即时生效'
  },
  {
    title: '接入使用',
    desc: '获取API密钥，接入支付功能，开启全球收款'
  }
])
</script>

<style scoped lang="scss">
.number {
  width:  55px;
  height: 55px;
  border-radius: 28px;
  background: #ffffff;
  border: 3px solid #488ff5;
  color: #488ff5;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  font-size: 24px;
  font-weight: bold;
}
.line{
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    min-width: 960px;
    background-color: #488ff5;
}
</style>
